<template>
	<view class="orderItem">
		<view class="order_info_top_box">
			<view class="order_sn">
				<span class="mar-right-10">订单编号</span>
				<span>{{ itemData.order_sn }}</span>
			</view>
			<view class="order_status" v-if="!isGrouper">
				<span>{{ statusType[itemData.status] }}</span>
			</view>
		</view>
		<view class="tour_order_info_box">
			<view class="fn-sz-30 fn-cl-222222 mar-bottom-20">{{ itemData.order_name }}</view>
			<view class="fn-sz-26 fn-cl-222222 mar-bottom-20">{{ itemData.option_name }}</view>
			<view class="tour_order_info_num_box fn-cl-666666 fn-sz-26">
				<view class="mar-right-30">数量:X{{ itemData.num }}</view>
				<view class="">商品单价: ￥{{ itemData.price }}</view>
			</view>
		</view>
		<view class="order_bottom_btn_box">
			<view class="parmary_btn"><button @tap="goDetails">订单详情</button></view>
			<view class="parmary_btn" v-show="itemData.status == 'done' || itemData.status == 'cancel'"><button
					@tap="delOrderShow = true">删除订单</button></view>
			<view class="parmary_btn" v-show="itemData.status == 'unpay'"><button
					@tap="cancelOrderShow = true">取消订单</button></view>
			<view class="pay_btn" v-show="itemData.status == 'unpay'"><button @tap="payNow">立即付款</button></view>
			<view class="pay_btn" v-show="itemData.status == 'payed'"><button @tap="checkCode">查看核销码</button></view>
			<view class="pay_btn" v-show="itemData.status == 'wait_comment'"><button @tap="commentNow">立即评价</button>
			</view>
		</view>
		<u-modal :show="cancelOrderShow" content="确认取消订单？" @cancel="cancelOrderShow = false" @confirm="confirmCancel"
			:showCancelButton="true" confirmColor="#FED100"></u-modal>
		<u-modal :show="delOrderShow" content="确认删除订单？" @cancel="delOrderShow = false" @confirm="confirmDel"
			:showCancelButton="true" confirmColor="#FED100"></u-modal>
		<u-modal :show="comfirmGetShow" content="确认收货？" @cancel="comfirmGetShow = false" @confirm="comfirmGet"
			:showCancelButton="true" confirmColor="#FED100"></u-modal>
		<ratePopup @successSubmitRate="successSubmitRate" :orderInfo="itemData" ref="ratePopup"></ratePopup>
		<u-popup :show="codeShow" mode="center" @close="closeCode" :round="12">
			<view class="code_show_box">
				<view class="close_code_btn" @tap="closeCode">
					<image src="../../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="code_times" v-if="itemData.type==2">
					<span class="mar-right-10">剩余次数：</span>{{itemData.times-itemData.used_times}}次
				</view>
				<view class="code_times" v-if="itemData.type==3">
					<span class="mar-right-10">有效期至：</span>{{itemData.expire_time}}
				</view>
				<view class="code_img_box">
					<image :src="codeImg" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ratePopup from '../ratePopup/ratePopup.vue';
	import afterSalePopup from '../afterSalePopup/afterSalePopup.vue';
	export default {
		name: 'tourOrderItem',
		components: {
			ratePopup,
			afterSalePopup
		},
		props: {
			isGrouper: {
				type: Boolean,
				default: false
			},
			itemData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				cancelOrderShow: false,
				comfirmGetShow: false,
				delOrderShow: false,
				codeShow: false,
				statusType: {
					unpay: '待付款',
					payed: '待使用',
					deliver: '配送中',
					wait_comment: '待评价',
					done: '已完成',
					sale_service: '售后',
					cancel: '已取消'
				},
				codeImg: ''
			};
		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url: `/pages/order/tourDetails?order_id=${this.itemData.id}`
				});
			},
			payNow() {
				uni.navigateTo({
					url: `/pages/orderPay/tourOrderPay?order_id=${this.itemData.id}`
				});
			},
			confirmCancel() {
				this.$api.cancelTourDeliver({
					order_id: this.itemData.id
				}).then(res => {
					this.$helper.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							this.$emit('changeOrderStatus');
						}, 300);
					}
				});
			},
			confirmDel() {
				this.$api.delTourDeliver({
					order_id: this.itemData.id
				}).then(res => {
					this.$helper.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							this.$emit('changeOrderStatus');
						}, 300);
					}
				});
			},
			//现在评价
			commentNow() {
				this.$refs.ratePopup.ratePopupShow = true;
			},

			//评价成功回调
			successSubmitRate() {
				setTimeout(() => {
					this.$emit('changeOrderStatus');
				}, 300);
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.itemData.deliver_phone
				});
			},
			//查看二维码
			checkCode() {
				this.$api.getCheckStr({
					order_id: this.itemData.id
				}).then(res => {
					if (res.code == 1) {
						this.codeImg = res.data.img;
						this.codeShow = true;
					}
				})
			},
			//关闭二维码模态框
			closeCode() {
				this.codeShow = false;
			}
		}
	};
</script>

<style lang="scss">
	.orderItem {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;

		.order_info_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 28rpx;
			border-bottom: 1rpx dashed #cccccc;

			.order_sn {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}

			.order_status {
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
			}
		}

		.tour_order_info_box {
			padding: 27rpx 0 32rpx;
			border-bottom: 1rpx dashed #cccccc;

			.tour_order_info_num_box {
				display: flex;
				align-items: center;
			}
		}

		.order_bottom_btn_box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-top: 24rpx;

			view {
				margin-right: 20rpx;

				button {
					width: 150rpx;
					height: 58rpx;
					font-size: 24rpx;
					line-height: 58rpx;
					border-radius: 33rpx;
					padding: 0;
				}

				&:nth-last-child(1) {
					margin-right: 0rpx;
				}
			}
		}

		.parmary_btn {
			button {
				color: #222222;
				text-align: center;
				background: #ffffff;
				border-radius: 33rpx;
				border: 1rpx solid #cccccc;
			}
		}

		.pay_btn {
			button {
				color: #222222;
				text-align: center;
				background-color: #fed100;
			}
		}
	}

	.code_show_box {
		box-sizing: border-box;
		padding: 80rpx 140rpx 140rpx;
		position: relative;
		border-radius: 80rpx;

		.close_code_btn {
			width: 45rpx;
			height: 45rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.code_times {
			text-align: center;
			margin-bottom: 30rpx;
			font-size: 26rpx;
			color: red;
		}

		.code_img_box {
			width: 400rpx;
			height: 400rpx;
			background-color: #222222;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>